<template>
  <div class="mail-container-message-detail-item">
    <div class="info-content-mail-header">
      <Avatar :mode="mode" :size="32" />
      <span class="name"> {{ name }}</span>
      <div class="view-operate" v-if="heightMode != 1">
        <i class="iconfont icon-caret-down" v-show="heightMode == 2" @click="changeHeightMode(3)"><span>{{ t('common.base.expand') }}</span></i>
        <i class="iconfont icon-caret-up" v-show="heightMode == 3" @click="changeHeightMode(2)"><span>{{ t('common.base.collapse') }}</span></i>
      </div>
    </div>
    <div ref="mailMessageContent" class="msgContainer" :style="getStyle">
      <div class="form-view-row">
        <label>{{ t('event.detail.components.dialog.text4') }}:</label>
        <div class="form-view-row-content" v-html="senderName"></div>
      </div>
      <div class="form-view-row">
        <label>{{ t('common.base.sendTime') }}:</label>
        <div class="form-view-row-content">{{ formatDate(detailInfo.sentDate) }}</div>
      </div>
      <div class="form-view-row">
        <label>{{ t('common.base.addressee') }}:</label>
        <div class="form-view-row-content" v-html="renderReceiver(detailInfo.receiver)"></div>
      </div>
      <div class="form-view-row">
        <label>{{ t('event.detail.components.dialog.text8') }}:</label>
        <div class="form-view-row-content">{{ detailInfo.emailSubject }}</div>
      </div>
      <div class="form-view-row">
        <label>{{ t('common.form.type.attachment') }}:</label>
        <div class="form-view-row-content" v-if="attachment.length>0">
          <MailAttachmentListPreview :email-attachment-list="attachment" />
        </div>
      </div>
      <div class="content" v-html="detailInfo.content" @click="imgDomPreview"></div>
    </div>
  </div>
</template>
<script>
/** vue */
import { defineComponent, computed, reactive, toRefs, onMounted, ref, nextTick } from 'vue';
/** util */
import { formatDate } from 'pub-bbx-utils';
import { renderReceiver, renderSender, imgDomPreview } from '@src/modules/im/imChat/utils/tools.js'
import { t } from '@src/locales';
/** components */
import MailAttachmentListPreview from '@src/modules/im/components/MailAttachmentListPreview.vue'
import Avatar from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/Avatar.vue'

export default defineComponent({
  name: 'MailDetailItem',
  components: {
    MailAttachmentListPreview,
    Avatar,
  },
  props: {
    detailInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {

    const mailMessageContent = ref()

    const attachment = computed(() => {
      return props?.detailInfo?.attachment ?? [];
    })

    const senderName = computed(() => {
      return renderSender({senderName:props?.detailInfo?.senderName, sender:props.detailInfo.sender})
    });

    const state = reactive({
      heightMode: 1, // 1:标准不压缩不展开  2:压缩 3:展开
      maxHeight: 200, // 当高度超过这个值，进行压缩或展开模式
    });

    const changeHeightMode = val => {
      state.heightMode = val;
    };

    const name = computed(()=>{
      return props.detailInfo.messageType == 1 ? props.detailInfo.customerName : props.detailInfo.customerServiceName
    })

    const mode = computed(()=>{
      return props.detailInfo.messageType == 1 ? 'head_customer' : 'head_service'
    })

    const getStyle = computed(() => {
      const { heightMode, maxHeight } = state;
      if (heightMode == 2) return { 'height': `${maxHeight}px`, 'overflow-y': 'hidden' };
      if (heightMode == 3) return { height: 'auto' };
      return {};
    });

    function getImgLoadEd(callback) {
      let images = document.querySelector('.msgContainer')?.querySelectorAll('img') ?? [];

      if (Array.from(images).length < 0) return callback();

      const promises = Array.from(images).map(node => {
        return new Promise((resolve, reject) => {
          let loadImg = new Image();
          loadImg.src = node.src;
          loadImg.onload = () => {
            resolve(node);
          };
        });
      });

      Promise.all(promises)
        .then(results => {
          callback();
        })
        .catch(e => {
          console.error('网络异常或其他程序异常', e);
        });
    }

    function watchMsgHeight() {
      const height = mailMessageContent.value.offsetHeight;
      if (height > state.maxHeight) {
        changeHeightMode(2);
      }
    }

    

    onMounted(() => {
      nextTick(() => {
        getImgLoadEd(watchMsgHeight);
      });
    });

    
    return {
      ...toRefs(state),
      formatDate,
      renderReceiver,
      attachment,
      senderName,
      imgDomPreview,
      t,
      changeHeightMode,
      getStyle,
      mailMessageContent,
      name,
      mode,
    };
  },
});
</script>
<style lang="scss" scoped>
.mail-container-message-detail-item {
  background: #f5f7fa;
  border-radius: 4px;
  padding: 20px;
  .info-content-mail-header {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    .name {
      margin: 0 12px;
    }
    .view-operate {
      cursor: pointer;
      .iconfont {
        span {
          font-size: 14px;
          margin-left: 4px;
        }
      }
    }
  }
  .form-view-row {
    padding: 5px 0px;
    .base-comment-attachment {
      padding: 2px 8px;
      flex: 1;
      // display: flex;
      // flex-wrap: wrap;
      ::v-deep .base-file-item {
        flex-shrink: 0;
        margin-right: 16px;
      }
    }
  }
  .content {
    padding: 12px;
  }
}
</style>
